 <template>
    <div>
        <div class="search-wrap" :class="{'partial':isSearchSub}">
            <div class="box-l">
          <!--      <el-select v-model="value" placeholder="项目" class="prdt-select" style="font-size:0.3rem">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        style="font-size:0.3rem"
                    ></el-option>
                </el-select>-->
                项目
            </div>
            <div class="box-m">
                <div class="search-box all">
                    <input
                        ref="keywordTxt"
                        class="txt-input"
                        name="keyword"
                        type="text"
                        placeholder="Search"
                        @click="subSearch(true)"
                        v-model="keyword"
                    >

                    <i class="icon iconfont icon-guanbi111 custom-Eicon"  @click="keywordEmpty()" v-show="isSearchSub"></i>
                </div>
            </div>
            <div class="box-r">
                <i class="icon iconfont icon-sousuo custom-Eicon" @click="search()"></i>
            </div>
            <span class="cancel-btn" v-if="isSearchSub" @click="subSearch(false)">取消</span>
        </div>
    </div>
</template>

 <script type="text/ecmascript-6">
export default {
  name: "",
  data() {
    return {
      options: [
        {
          value: "1",
          label: "项目"
        }
      ],
      value: '',
      keyword: this.$route.query.keyword,
    };
  },
  props: ["isSearchSub"],
  components: {},
  mounted: function() {
    // this.$emit('emtSearch')
  },
  methods: {
    subSearch(val) {
      this.$emit("emtSearch", val);
    },
    search(){
        window.location.href = '/product/index?keyword=' + this.keyword;
    },
    keywordEmpty(){
      this.$refs.keywordTxt.value=''
    }
  }
};
</script>

<style scoped lang="scss">
.search-wrap {
  width: 100%;
  $letHeight: 0.8rem;
  height: $letHeight;
  position: relative;
  @extend .cmm-clearfix;
  background-color: $c-gray-dark;
  border-radius: 0.12rem;
  margin: 0.05rem auto;

  &.partial {
    width: 6.25rem;
    margin: 0.05rem 0;

    .box-m {
      width: 3.58rem;
    }
  }

  .box-l {
    @extend .cmm-translateY;
    border-right: 0.02rem solid $c-mainC;
    width: 1.5rem;
      text-align: center;
      font-size: 0.3rem;
  }

  .box-m {
    @extend .cmm-translateY;

    left: 1.5rem;
    width: 4.58rem;
  }

  .box-r {
    @extend .cmm-translateY;


    width: 1rem;
    right: 0rem;
    text-align: center;
    .custom-Eicon {
      font-size: 0.5rem;
      color: #dddddd;
      line-height: 0.8rem;
    }
  }

  .cancel-btn {
    position: absolute;
    transform: translateX(100%) translateY(-50%);
    right: 0;
    top: 50%;
    line-height: 0.8rem;
    display: inline-block;
    width: 0.9rem;
    text-align: right;
    padding-right: 0.04rem;
    line-height: $letHeight - 0.48;
    background-color: transparent;
    font-size: 0.32rem;
    color: $c-mainC;
  }
}

$letHeight: 0.76rem;
.search-box {
  position: relative;
  width: 100%;

  &.all {
    width: 100%;
  }

  &.partial {
    width: 3.5rem;
  }

  .txt-input {
    width: 100%;
    position: relative;
    line-height: $letHeight;
    height: $letHeight;
    font-size: 0.3rem;
    color: #dddddd;
    max-width: 100%;
    padding-left: 0.14rem;
    background-color: $c-gray-dark;

    &::-webkit-input-placeholder {
      font-weight: 500;
    }
    &:-moz-placeholder {
      font-weight: 500;
    }
    &::-moz-placeholder {
      font-weight: 500;
    }
    &:-ms-input-placeholder {
      font-weight: 500;
    }

    &.msg-txt {
      letter-spacing: 0.7rem;
      padding-left: 0.3rem;
      margin-top: 0.5rem;
    }
  }
  .custom-partHr {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

    span {
      width: 0.8rem;
      display: inline-block;
      border-bottom: 0.02rem solid $c-gray-light;
    }
  }
  i {
    line-height: $letHeight;
    display: inline-block;
    color: $c-mainC;
    @extend .cmm-translateY;
    right: 0.1rem;
    left: auto;
    font-size: 0.3rem;
  }
}

    .prdt-select{
        /deep/.el-input__inner{
            font-size: 0.3rem!important;
        }
    }
</style>
